SVG (Scalable Vector Graphics) একটি XML-ভিত্তিক ফাইল ফরম্যাট, যা ওয়েব পেজে গ্রাফিক্স প্রদর্শন করতে ব্যবহৃত হয়। SVG চিত্রের বিভিন্ন উপাদানগুলি XML কোডের মাধ্যমে সংজ্ঞায়িত করা হয় এবং এগুলির সাথে কাজ করার জন্য একটি DOM (Document Object Model) ব্যবহৃত হয়। DOM হলো একটি প্রোগ্রামিং ইন্টারফেস, যা HTML, XML বা SVG ডকুমেন্টের গঠন এবং উপাদানগুলির সাথে ইন্টারঅ্যাকশন করতে সহায়তা করে।
SVG এর DOM (Document Object Model)
SVG এর DOM হল একটি জাভাস্ক্রিপ্ট API, যা SVG ডকুমেন্টের বিভিন্ন উপাদানকে ম্যানিপুলেট (manipulate) এবং নিয়ন্ত্রণ (control) করার জন্য ব্যবহৃত হয়। SVG ডকুমেন্টের প্রতিটি উপাদান (যেমন <circle>, <rect>, <line>, <path>, ইত্যাদি) DOM-এর একটি নোড (node) হিসেবে কাজ করে, এবং এই উপাদানগুলির সাথে ইন্টারঅ্যাকশন করার জন্য বিভিন্ন মেথড (methods) ও প্রপার্টি (properties) ব্যবহার করা হয়।
SVG DOM এর বৈশিষ্ট্য
নোড বেসড স্ট্রাকচার: SVG এর DOM একটি নোড বেসড (node-based) স্ট্রাকচারে সংগঠিত। প্রতিটি SVG উপাদান যেমন একটি <circle> বা <path> একটি DOM নোড হিসেবে প্রতিনিধিত্ব করে। এই নোডগুলির মাধ্যমে গ্রাফিক্সের বৈশিষ্ট্য এবং আচরণ পরিবর্তন করা যায়।
এলিমেন্ট ম্যানিপুলেশন: SVG এর DOM জাভাস্ক্রিপ্টের মাধ্যমে SVG উপাদানগুলির গুণাগুণ বা বৈশিষ্ট্য পরিবর্তন করতে সহায়তা করে। উদাহরণস্বরূপ, <circle> এর cx, cy, r (radius) প্রপার্টি পরিবর্তন করা যায়, যার ফলে চিত্রের অবস্থান এবং আকার পরিবর্তিত হয়।
ইভেন্ট হ্যান্ডলিং: SVG DOM এ ইভেন্ট হ্যান্ডলিং (event handling) সমর্থিত। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক, মাউস মুভমেন্ট) ট্র্যাক করতে এবং সেই অনুযায়ী SVG উপাদানের পরিবর্তন করতে ব্যবহৃত হয়।
আনিমেশন: SVG DOM জাভাস্ক্রিপ্টের মাধ্যমে অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি SVG উপাদানকে ধীরে ধীরে এক স্থান থেকে অন্য স্থানে সরানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা যেতে পারে।
SVG DOM এর মাধ্যমে সাধারণ ম্যানিপুলেশন
উদাহরণ: একটি বৃত্তের অবস্থান পরিবর্তন করা
<svg width="200" height="200" id="svgCanvas">
<circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<script>
var svg = document.getElementById('svgCanvas');
var circle = document.getElementById('myCircle');
// circle এর cx (center x) ও cy (center y) পরিবর্তন করা
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
</script>
এই কোডে, <circle> উপাদানের cx এবং cy প্রপার্টি জাভাস্ক্রিপ্ট ব্যবহার করে পরিবর্তন করা হয়েছে, যার ফলে বৃত্তটি নতুন অবস্থানে চলে যাবে।
SVG DOM এর ব্যবহারের সুবিধা
- ডাইনামিক কন্টেন্ট: SVG DOM-এর মাধ্যমে ওয়েব পেজে ডাইনামিকভাবে গ্রাফিক্স তৈরি এবং ম্যানিপুলেট করা যায়। এটি ওয়েবসাইটে ইন্টারঅ্যাক্টিভ গ্রাফিক্স প্রদর্শনে সহায়তা করে।
- এনিমেশন: SVG DOM জাভাস্ক্রিপ্ট বা CSS এর মাধ্যমে অ্যানিমেশন তৈরি করতে সক্ষম, যা ওয়েব পেজকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে।
- ইন্টারঅ্যাকটিভিটি: DOM ইভেন্ট হ্যান্ডলিং ব্যবহারের মাধ্যমে, ইউজার ইন্টারঅ্যাকশন (যেমন ক্লিক, ড্র্যাগ, হভার) এর ভিত্তিতে SVG উপাদান পরিবর্তন করা সম্ভব।
- ইজি কাস্টমাইজেশন: SVG DOM সোজা কোড দিয়ে কাস্টমাইজ করা যায়, যা ওয়েব ডিজাইনারদের জন্য সহজ ও দ্রুত সমাধান প্রদান করে।
SVG এর DOM ব্যবহারের মাধ্যমে জাভাস্ক্রিপ্ট, CSS বা অন্যান্য ওয়েব প্রযুক্তি দ্বারা গ্রাফিক্সের কার্যকারিতা বৃদ্ধি করা সম্ভব। এটি ওয়েব পেজের ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করে এবং ইন্টারঅ্যাকটিভ এবং ডাইনামিক উপাদান তৈরি করার সুযোগ দেয়।
